html,body {
  width:100%;
  height:100%;
  
}

.header-box {
  height:60px;
  line-height: 60px;
  background-color:#192254;
  position: fixed;
  top:0;
  width:100%;
}
.logo-box {
  width:200px;
  height:60px;
  float:left;
}
.logo-box img {
  margin-top:16px;
}
.logo-title {
  color:#fff;
  font-size:20px;
  margin-left:10px;
  float:left;
}
.header-right-box {
  margin-left:200px;
}
.header-right-box .user {
  background: url(../imgs/user-icon.png) 0 center no-repeat;
}
.header-right-box .pwd {
  background: url(../imgs/pwd-icon.png) 0 center no-repeat;
}
.header-right-box .logout {
  background: url(../imgs/logout-icon.png) 0 center no-repeat;
}
.main-box {
  height:100%;
  padding-top:60px;
}
.left-nav {
  width:200px;
  height:100%;
  float:left;
  padding:20px 10px;
  background-color:#364ECE;
}
.right-main {
  padding:10px;
  height:100%;
  margin-left:200px;
  background-color: #f0f5fb;
}
.header-right-box {
  float:right;
}
.header-right-box ul li {
  padding-left:30px;
  color:#fff;
  float:left;
  margin-right:30px;
}
.left-nav > ul > li {
  padding-left:20px;
}
.left-nav ul li a {
  display: block;
  padding-left:30px;
  line-height:50px;
  position: relative;
}
.left-nav ul li a.has-msg:before {
  content:'';
  width:6px;
  height:6px;
  border-radius: 50%;
  background-color:#FFE534;
  position: absolute;
  left:16px;
  top:16px;
}
.left-nav > ul >li >a {
  color:#82B9FF;
}
.left-nav .second-menu li a {
  color:#A0C9FF;
  position: relative;
}
.left-nav .second-menu li a:before {
  content:'';
  position: absolute;
  width:4px;
  height:4px;
  background-color: #A0C9FF;
  left:10px;
  top:50%;
  transform: translateY(-50%);
}
.left-nav > ul > li.active {
  background-color:#455EEE;
  border-radius: 6px;
}
.left-nav li.active > a {
  color:#5FF4AF;
}
.left-nav .second-menu {
  display: none;
}
.second-menu > li.has-next > a:before {
  background-color: transparent;
  content:'';
  position: absolute;
  border:4px solid transparent;
  border-left:4px solid #A0C9FF;
}
.second-menu > li.has-next.active > a:before {
  background-color: transparent;
  content:'';
  position: absolute;
  border:4px solid transparent;
  border-top:4px solid #5FF4AF;
}
.left-nav .third-menu {
  display: none;
  padding-left:10px;
}
.left-nav li.active > .third-menu {
  display: block;
}
.left-nav li.active .second-menu {
  display: block;
}
.left-nav li a.home {
  background: url(../imgs/home-icon.png) 0 center no-repeat;
}
.left-nav li.active a.home {
  background: url(../imgs/home-icon-active.png) 0 center no-repeat;
}

.left-nav li a.qyxx {
  background: url(../imgs/qyxx-icon.png) 0 center no-repeat;
}
.left-nav li.active a.qyxx {
  background: url(../imgs/qyxx-icon-active.png) 0 center no-repeat;
}

.left-nav li a.tyst {
  background: url(../imgs/tyst-icon.png) 0 center no-repeat;
}
.left-nav li.active a.tyst {
  background: url(../imgs/tyst-icon-active.png) 0 center no-repeat;
}

.left-nav li a.gzgl {
  background: url(../imgs/gzgl-icon.png) 0 center no-repeat;
}
.left-nav li.active a.gzgl {
  background: url(../imgs/gzgl-icon-active.png) 0 center no-repeat;
}

.left-nav li a.yqgl {
  background: url(../imgs/yqgl-icon.png) 0 center no-repeat;
}
.left-nav li.active a.yqgl {
  background: url(../imgs/yqgl-icon-active.png) 0 center no-repeat;
}

.left-nav li a.xtgl {
  background: url(../imgs/xtgl-icon.png) 0 center no-repeat;
}
.left-nav li.active a.xtgl {
  background: url(../imgs/xtgl-icon-active.png) 0 center no-repeat;
}

.left-nav li a.hysj {
  background: url(../imgs/hysj-icon.png) 0 center no-repeat;
}
.left-nav li.active a.hysj {
  background: url(../imgs/hysj-icon-active.png) 0 center no-repeat;
}